<script>
import { MoreFilled } from "@element-plus/icons-vue";
export default {
  components: { MoreFilled },
  props: {
    title: {
      type: String,
      required: false,
      default: "Task"
    },
    options: {
      type: Array,
      required: false,
      default: [
        {
          value: "Option1",
          label: "Option1"
        },
        {
          value: "Option2",
          label: "Option2"
        },
        {
          value: "Option3",
          label: "Option3"
        },
        {
          value: "Option4",
          label: "Option4"
        },
        {
          value: "Option5",
          label: "Option5"
        }
      ]
    },
    inputType: {
      type: String,
      required: false,
      default: "0"
    }
  },
  data() {
    return {
      value: this.options[0].value,
      fileName: "选择配置文件",
      fileData: "",
      inputValue: ""
    };
  },
  methods: {
    uploadFile(file) {
      return new Promise((res, rej) => {
        let reader = new FileReader();
        reader.readAsText(file.raw);
        reader.onload = function () {
          res(this.result);
        };
      });
    },
    async handleChange(file) {
      this.fileName = file.name;
      await this.uploadFile(file).then(result => {
        this.fileData = result;
      });
    }
  }
};
</script>

<template>
  <div class="input">
    <el-row class="input-title">
      <el-col :span="24">
        <div>{{ title }}</div>
      </el-col>
    </el-row>
    <el-row class="input-info-row">
      <el-col :span="24">
        <el-select v-if="inputType == '0'" v-model="value" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-container v-if="inputType == '1'" class="input-upload-container">
          <el-main class="input-upload-main">
            <el-input v-model="fileName" placeholder="选择文件"></el-input>
          </el-main>
          <el-aside class="input-upload-aside">
            <el-upload :show-file-list="false" :on-change="handleChange">
              <button class="input-upload-btn">
                <el-icon color="rgb(169, 172, 179)">
                  <MoreFilled />
                </el-icon>
              </button>
            </el-upload>
          </el-aside>
        </el-container>
        <el-input v-if="inputType == '2'" v-model="inputValue"></el-input>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
$input-height: 70px;
$input-title-height: 22px;
$input-row-height: $input-height - $input-title-height;
$input-upload-aside-width: 5%;
$input-upload-container-height: 32px;

:deep(.el-main) {
  height: $input-upload-container-height !important;
  padding: 0;
}

:deep(.el-main.input-upload-main > .el-input > .el-input__wrapper) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

:deep(.el-upload) {
  height: 100% !important;
  display: block !important;
}

.input {
  .input-title {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 1vh;
    height: $input-title-height;
    line-height: $input-title-height;
  }
  .input-info-row {
    height: $input-row-height;
  }
  .input-upload-container {
    .input-upload-aside {
      width: $input-upload-aside-width;
      overflow: hidden;

      .input-upload-btn {
        width: 100% !important;
        height: $input-upload-container-height;
        line-height: $input-upload-container-height;
        cursor: pointer;
        border-top: 1px solid rgb(220, 223, 230);
        border-right: 1px solid rgb(220, 223, 230);
        border-bottom: 1px solid rgb(220, 223, 230);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }

      .input-upload-btn:hover {
        background-color: rgb(234, 234, 234);
      }
    }

    .input-upload-main {
      overflow: hidden;
    }
  }
}
</style>
